<template>
  <div class="leave-message-back">
    <div class="leave-message-back-back" v-on:click="updateShowState(false)">

    </div>
    <div class="leave-message-back-content">
      <div class="leave-message-back-content-input">
        <textarea id="leave-message-textarea" class="leave-message-back-content-input-textarea f4-zlz" maxlength="60"
                  autofocus>

        </textarea>
      </div>
      <div class="leave-message-back-content-img"/>
      <div class="leave-message-back-content-close" v-on:click="updateShowState(false)"/>

    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: "LeaveMessageBack",
  props: {
    showContactMe: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      table: {
        name: '',
        contact: {
          type: 0,
          value: ''
        },
        message: ''
      }
    }
  },
  methods: {
    updateShowState(state) {
      this.$emit('updateShowState', state)
    }
  },
  mounted() {
    $('#leave-message-textarea').focus()
  }
}
</script>

<style scoped lang="scss">
.leave-message-back {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 998;

  &-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
  }

  &-content {
    position: absolute;
    overflow: hidden;
    width: 800px;
    height: 600px;
    border-radius: 10px;
    z-index: 999;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    box-shadow: 1px 1px 20px #eee;

    &-input {
      position: absolute;
      z-index: 1;

      &-textarea {
        position: absolute;
        left: 300px;
        top: 230px;
        background: none;
        border: none;
        min-width: 350px;
        max-width: 350px;
        max-height: 180px;
        min-height: 180px;
        line-height: 30px;
        text-indent: 2em;
        letter-spacing: 2px;
      }

      &-textarea:focus {
        outline: none;
      }
    }

    &-img {
      position: absolute;
      background-image: url("../../../../../public/image/留言板.png");
      background-size: 100% 100%;
      width: 100%;
      height: 100%;
    }

    &-close {
      cursor: pointer;
      position: absolute;
      background-image: url("../../../../../public/image/close.png");
      background-size: 34px 34px;
      background-repeat: no-repeat;
      background-position: 3px 3px;
      height: 40px;
      width: 40px;
      right: 35px;
      top: 25px;
      border-radius: 15px;
      transition: 0.3s;

      &:hover {
        background-color: #a0a3a2;
      }
    }
  }
}
</style>